<template>
	<div class="box">
		<div class="left shadow">
			<img src="@img/china.png" class="china">
			<h3>数字看板</h3>
			<ul class="router">
				<li class="shadow" @click="jump(index)" v-for="(item, index) in list" :key="index">{{ item }}</li>
			</ul>
		</div>
		<div class="right shadow"></div>
	</div>
</template>

<script setup>
import { reactive } from 'vue';

const list = reactive(['模板 1', '模板 2']);

function jump(i) {
	window.open(`model${i+1}`, '_blank');
}
</script>

<style lang="less" scoped>
@import "@less";
.box {
    .size();
	.df();
	.f_jc(space-between);
	.padd(10px);
	.left {
		.size(240px, 100%);
		.bor_r(10px);
		.df();
		.f_fd(column);
		.f_ai();
		.china {
			.w(160px);
			.marg(20px, 0);
		}
		.router {
			.w(100%);
			.mar_t(30px);
			.padd(30px);
			li {
				.size(100%, 40px);
				.font_cc(40px);
				.mar_b(10px);
			}
		}
	};
	.right {
		.size(calc(100% - 250px), 100%);
		.bor_r(10px);
	}
}
</style>